<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>
      <span>1</span>
    </li>
    <li>
      <span>2</span>
    </li>
    <li>
      <span>3</span>
    </li>
    <li>
      <span>4</span>
    </li>
  </ul>
  <style>
    /* ul {
      pointer-events: none;
    } */
    ul li {
      padding: 10px;
      margin: 10px 0;
      background-color: grey;
    }
    span {
      padding: 10px;
      background-color: red;

      /* 方案2的弥补，取消子元素的点击事件 */
      pointer-events: none; 
    }
  </style>
  <script>
    const ul = document.querySelector('ul');
    ul.addEventListener('click', event => {
      // 方案1（完美）：
      // closest选择最近的父元素
      const li = event.target.closest('li');
      if(li) {
        // 执行一些什么
      }

      // 方案2：
      // 缺点：如果点击的是li下面的子元素则不会触发
      // 可通过设置子元素pointer-events: none;(取消点击事件) 来弥补该缺点
      if(event.target.tagName === 'li') {
        // 执行一些什么
      }
    })
  </script>
</body>
</html>

